<template>
  <!-- 2.在子组件内定义一个位置<slot></slot>去接收父组件穿过来的结构 -->
  <!-- slot标签就是用来给传过来的结构定位的 -->

  <!-- 插槽的后备内容只需要写在slot双标签内部即可，当父组件没有传结构的时候就会启用默认后备内容 -->

  <!-- slot标签上有一个name属性可以用来分发对应的结构 -->
  <div>
    <h2>友情提示：</h2>
    <!-- 在插槽标签上定义属性，在template标签中会接受到 -->
    <slot name="content" :title="title" msg="我是写死的msg" :arr="arr">
      <p>我是ikun，我是插槽的默认内容</p>
    </slot>

    <!-- <slot name="username">
      <p>我是ikun，我是插槽的默认内容</p>
    </slot>

    <slot name="default">
      <p>我是ikun，我是插槽的默认内容</p>
    </slot> -->
    <h2>
      <slot name="option" :yes="yes" :no="no">
        <button>关闭</button>
      </slot>
    </h2>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      title: '我又改了',
      arr: [1, 2, 3],
      yes: '登录',
      no: '注册'
    }
  }
}
</script>

<style scoped>
</style>